<template>
	<div class="flex-container">
		<div class="flex-item">
			<CPU />
		</div>
		<div class="flex-item">
			<Memory />
		</div>
		<div class="flex-item">
			<Disk />
		</div>
		<div class="flex-item">
			<IO />
		</div>
	</div>
</template>
  
<script>
  import CPU from "./system/Summary.vue"
  import Memory from "./system/Upf0.vue"
  import Disk from "./system/Upf1.vue"
  import IO from "./IOGraph.vue"
  
  export default {
	components: {
	  CPU,
	  Memory,
	  Disk,
	  IO
	},
  };
</script>
  
<style scoped>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.flex-item {
  flex: 1 1 48%; /* 每个div占据父容器宽度的48%，留出间隙 */
  box-sizing: border-box; /* 包含padding和border在内的宽度 */

}
</style>